<template>
    <el-progress :percentage="progress" :format="format"></el-progress>
</template>

<script>
export default {
    name: "GetProcess",
    data() {
        return {
            progress: 0,
        };
    },
    mounted() {
        this.setupWebSocket();
    },
    beforeDestroy() {
        // 在组件销毁时取消监听，以防止内存泄漏
        this.$socket.off('process_msg', this.handleLogMessage);
    },
    methods: {
        format(progress) {
            if (progress === 100) {
                this.$emit('processCompleted');     // 触发自定义事件
            }
            return progress === 100 ? '已完成' : `${progress}%`;
        },
        setupWebSocket() {
            this.sockets.subscribe('process_msg', message => { //组件内监听
                this.progress = parseInt(message.data);
            });
        },

    }
};
</script>

<style>
.el-progress {
    padding: 10px;
}


</style>